<template>
    <div>
        <div class="bar">list
            <span 
            class="list-icon" 
            @click="layoutFn('list')"
            :class="layout=='list'?'active':''"></span>
            <span class="box-icon" 
             @click="layoutFn('box')"
            :class="layout=='box'?'active':''"></span>
        </div>
        <div>
            <!-- box -->
           <ul :class="layout=='list'?'list':'box'">
            <li v-for="(item,index) in list" :key="index">
                <img :src="item.image.small" alt="">
                <p v-if="layout=='list'">{{item.title}}</p>
                <div class="clear"></div>
            </li>
           </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:"App",
    data(){
        return{
            layout:"list",
            list:[
                {
                "title": "儿童社交的爱与痛（套装全2册）",
                "url": "http://product.dangdang.com/25189806.html",
                "image": {
                    "large": "http://img3m6.ddimg.cn/48/21/25189806-1_w_7.jpg",
                    "small": "http://img3m6.ddimg.cn/48/21/25189806-1_w_7.jpg"
                }
            },
            {
                "title": "刘墉口才大师经典套装(畅销30年超值珍藏版)",
                "url": "http://product.dangdang.com/23995236.html",
                "image": {
                    "large": "http://img3m6.ddimg.cn/12/33/23995236-1_w_6.jpg",
                    "small": "http://img3m6.ddimg.cn/12/33/23995236-1_w_6.jpg"
                }
            },
            {
                "title": "丹·布朗作品系列：本源",
                "url": "http://product.dangdang.com/25253662.html",
                "image": {
                    "large": "http://img3m2.ddimg.cn/49/15/25253662-1_w_3.jpg",
                    "small": "http://img3m2.ddimg.cn/49/15/25253662-1_l_3.jpg"
                }
            },
            {
                "title": "高兴死了!!!（我正在人生低谷，我现在高兴死了！）",
                "url": "http://product.dangdang.com/25245058.html",
                "image": {
                    "large": "http://img3m8.ddimg.cn/58/32/25245058-1_w_4.jpg",
                    "small": "http://img3m8.ddimg.cn/58/32/25245058-1_l_4.jpg"
                }
            },
            {
                "title": "谈判：如何在博弈中获得更多(第四版)Everything is Negotiable",
                "url": "http://product.dangdang.com/25247638.html",
                "image": {
                    "large": "http://img3m8.ddimg.cn/64/22/25247638-1_l_1.jpg",
                    "small": "http://img3m8.ddimg.cn/64/22/25247638-1_l_1.jpg"
                }
            },
            {
                "title": "好想去这样那样的国家（全6册）",
                "url": "http://product.dangdang.com/25261269.html",
                "image": {
                    "large": "http://img3m9.ddimg.cn/33/0/25261269-1_l_3.jpg",
                    "small": "http://img3m9.ddimg.cn/33/0/25261269-1_l_3.jpg"
                }
            }
            ]
        }
    },
    methods:{
        layoutFn(name){
            let _self = this;
            _self.layout = name;
        }
    }
}
</script>
<style >
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .bar span{
        background: blue center no-repeat;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 5px;
        border-radius: 2px;
        cursor: pointer;
        }
     .bar .active{
        background-color: pink;
     }   
    .bar{
        text-align: right;
        background-color: blue;
        padding: 10px;
    }
    .bar .list-icon{
        background-image: url();
    }
    .bar .box-icon{
         background-image: url();
     }
     .box{
        width: 500px;
        margin: 0 auto;
     }
     .box li{
        float: left;
     }
     .box img{
        width: 250px;
     }
     .list{
        margin: 0 auto;
        width: 500px;
     }
     .list li {
        border-bottom:1px solid #ddd;
        padding: 10px;
     }
     .list li img{
        width: 120px;
        height: 120px;
        float: left;
     }
     .list li p {
        float: left;
     }
     .clear{
        clear: both;
     }
</style>